<template>
    <div class="app-container">
      <el-table v-loading="loading" :data="manageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户账号" align="center" prop="userId" />
        <el-table-column label="签到日期" align="center" prop="date" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考勤状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sign_in_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="签到时间" align="center" prop="checkIn" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checkIn) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="签退时间" align="center" prop="signOut" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.signOut) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="addSignin(scope.row)"
              v-hasPermi="['sign:manage:edit']"
            >签到</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="outSignin(scope.row)"
              v-hasPermi="['sign:manage:edit']"
            >签退</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
    </div>
  </template>
  
  <script>
  import { listManage, getManage, delManage, addManage, updateManage } from "@/api/sign/manage";
  
  export default {
    name: "Manage",
    dicts: ['sign_in_status'],
    data() {
      return {
        //格式化之后的当前时间
        times:'',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 考勤管理表格数据
        manageList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          date: null,
          status: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
      this.getTimes()
    },
    beforeDestroy() {
      if (this.times) {
        clearInterval(this.getTimesInterval); 
      }
    },
    
    methods: {
      getTimes(){
        setInterval(this.getTimesInterval, 1000);
      },
      getTimesInterval:function() {
        let _this = this;
        let year = new Date().getFullYear(); //获取当前时间的年份
        let month = new Date().getMonth() + 1; //获取当前时间的月份
        let day = new Date().getDate(); //获取当前时间的天数
        let hours = new Date().getHours(); //获取当前时间的小时
        let minutes = new Date().getMinutes(); //获取当前时间的分数
        let seconds = new Date().getSeconds(); //获取当前时间的秒数
        //当小于 10 的是时候，在前面加 0
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        //拼接格式化当前时间
        _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },


      /** 查询考勤管理列表 */
      getList() {
        //加载页面，加载成功关闭
        this.loading = true;
        listManage(this.queryParams).then(response => {
          this.manageList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
      this.form = {
        signId: null,
        userId: null,
        date: null,
        status: null,
        checkIn: null,
        signOut: null
      };
      this.resetForm("form");
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.signId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const signId = row.signId || this.ids
        getManage(signId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改考勤管理";
        });
      },

      /** 签到 */
      addSignin(row) {
        this.reset();
        if (row.checkIn != null) {
          this.$modal.msgError("您已签到，请不要重复签到。");
          return;
        } else {
          row.checkIn = this.times;
          this.$modal.confirm('正常签到时间为08:00-10:00，现在时间为"' + this.times + '"，是否签到？').then(function () {
            return updateManage(row).then(response => {
              this.getList();
              this.$modal.msgSuccess("签到成功");
            })
          }).catch(() => { row.checkIn = null;});
        }
      },

      /** 签退 */
      outSignin(row) {
        this.reset();
        if (row.signOut != null) {
          this.$modal.msgError("您已签退，请不要重复签退。");
          return;
        } else {
          row.signOut = this.times;
          this.$modal.confirm('现在时间为"' + this.times + '"，一旦签退无法撤销，是否签退？').then(function () {
            return updateManage(row).then(response => {
              this.getList();
              this.$modal.msgSuccess("签退成功");
            })
          }).catch(() => {row.signOut = null; });
        }
      },



      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.signId != null) {
              updateManage(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addManage(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      
    }
  };
  </script>
  